<!DOCTYPE html>
<html>
<head lang="zh-Hans">
    <meta charset="UTF-8">
    <title></title>
    <!--
    1.JS 存在的问题
    a》JS存在浏览器的兼容性的问题
    b》dom操作相对复杂
    2JQ 出现
    a》能够轻松操作dom
    b》很少的代码实现更多的功能
    c》实现各种特效和动画
    类库
    -->
</head>
<body>
<!--引入jq框架-->
<script src="js/jquery.min.js"></script>
<img src="https://www.juhe.cn/themes/v5/public/images/loginlogo.png">
<h2>天气应用-跨域测试</h2>
<hr/>
<p id="weather">
    今天天气
</p>
<p id="humidity">
    湿度:
</p>
<p id="dressing_index">穿衣指数：</p>
<p id="wash_index">洗车指数：</p>
<p id="travel_index">旅行指数：</p>
<p id="exercise_index">锻炼指数：</p>
<p id="uv_index">紫外线指数：</p>
<hr/>
<p>未来6天天气</p>
<p id="searchResult"></p>
<br/>
<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<br/>
<button>查询</button>
<button id="alapi">alapi</button>

<script type="text/javascript">
    $("button").click(function () {
        $.ajax({
            url: "https://v.juhe.cn/weather/index?format=2&cityname=%E5%B8%B8%E5%B7%9E&key=17e3e4d1b388f6ee8c0e158e5e16265e",
            dataType: 'jsonp',
            data: '',
            jsonp: 'callback',
            success: function (result) {
                $("p#weather").text("今日天气:" + result.resultcode);
                $("p#humidity").text("湿度:" + result.reason);
                $("p#dressing_index").text("穿衣指数：" + result.error_code);
                $("p#wash_index").text("洗车指数：" + result.result);
            }
        });
    })
    $("#alapi").click(function () {
        $.ajax({
            url: "https://v2.alapi.cn/api/soul",
            success: function (result) {
//                console.log(result.toString());
                $("#div1").html(result.msg);
            }
        });
    })
</script>
</body>
</html>